<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>9-alert组件</title>
    <link rel="stylesheet" type="text/css" href="./fontFace.css">
    <style>
        [class*=" m-icon-"],
        [class^=m-icon-] {
            font-family: element-icons!important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /*基本样式*/
        
        .m-alert {
            width: 100%;
            padding: 8px 16px;
            margin: 0;
            box-sizing: border-box;
            border-radius: 4px;
            position: relative;
            background-color: #fff;
            overflow: hidden;
            color: #fff;
            display: table;
            transition: opacity .2s;
            margin-top: 10px;
            border: 1px solid #ccc;
        }
        
        .m-content {
            display: table-cell;
            padding: 0 8px;
        }
        
        .m-message {
            font-size: 13px;
            line-height: 18px;
        }
        /*不同状态样式*/
        
        .m-alert-success {
            background-color: #13ce66;
        }
        
        .m-alert-info {
            background-color: #50bfff;
        }
        
        .m-alert-warning {
            background-color: #f7ba2a;
        }
        
        .m-alert-error {
            background-color: #ff4949;
        }
        /*关闭按钮样式*/
        
        .m-closebtn {
            font-size: 12px;
            color: #fff;
            opacity: 1;
            top: 12px;
            right: 15px;
            position: absolute;
            cursor: pointer;
        }
        
        .m-icon-close:before {
            content: "\E60C";
        }
        /*小图标样式*/
        
        .m-icon {
            font-size: 16px;
            width: 16px;
            display: table-cell;
            color: #fff;
            vertical-align: middle;
        }
        
        .m-icon-success:before {
            content: "\E609";
        }
        
        .m-icon-warning:before {
            content: "\E615";
        }
        
        .m-icon-info:before {
            content: "\E615";
        }
        
        .m-icon-error:before {
            content: "\E60B";
        }
        /*自定义图标*/
        
        .m-icon-message:before {
            content: "\E618";
        }
        
        .m-icon-menu:before {
            content: "\E617";
        }
        
        .m-icon-setting:before {
            content: "\E61E";
        }
        
        #app {
            width: 500px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>默认的alert</h2>
        <tp-alert :showicon="true" :closeable="false"></tp-alert>
        <h2>自定义的alert-1</h2>
        <tp-alert styles="background:pink;" :showicon="true" :closeable="false">
        </tp-alert>
        <h2>自定义的alert-2</h2>
        <tp-alert type="info">
            <i slot="iconTmp" class="m-icon m-icon-menu"></i>
            <template slot="titleTmp">
                <p>我的定制的提醒信息1</p>
                <p>我的定制的提醒信息2</p>
                <p>我的定制的提醒信息3</p>
                <p>我的定制的提醒信息4</p>
                <p>我的定制的提醒信息5</p>
                <p>我的定制的提醒信息6</p>
            </template>

        </tp-alert>
    </div>
    <script>
        Vue.component('tp-alert', {
            props: {
                type: {
                    type: String,
                    default: "info"
                },
                title: {
                    type: String,
                    default: "这里有一个消息要提示"
                },
                showicon: {
                    // 是否显示icon图标
                    type: Boolean,
                    default: false
                },
                closeable: {
                    // 是否禁用关闭按钮
                    type: Boolean,
                    default: true
                },
                styles: {
                    type: String
                }

            },
            template: `
                <div class="m-alert m-alert-info" :class="[typeClass]" :style="styles">
                    <slot name="iconTmp">
                        <i class="m-icon m-icon-info" :class="[iconClass]" v-if="showicon"></i>
                    </slot>
                    <div class="m-content">
                        <slot name="titleTmp">
                            <span class="m-message">{{title}}</span>
                        </slot>
                        <i class="m-closebtn m-icon-close" @click="btnClose" v-if="!closeable"></i>
                    </div>
                </div>         
            `,
            methods: {
                btnClose: function() {
                    alert('您点击了关闭');
                    this.$emit('clock-click');
                }
            },
            computed: {
                typeClass() {
                    return `m-alert-${this.type}`
                },
                iconClass() {
                    return `m-icon-${this.type}`
                }
            }
        })


        new Vue({
            el: "#app"
        })
    </script>
</body>

</html